<!DOCTYPE html>
{% load static %}
<html lang="en">
{% block custom_css %}
    <style>
        .left-menu .menu-body .static-menu .item .title {
            color:white;
        }

        .left-menu .menu-body .static-menu .icon-wrap {
            width: 20px;
            display: inline-block;
            text-align: center;
        }

        .left-menu .menu-body .static-menu a {
            text-decoration: none;
            padding: 8px 15px;
            border-bottom: 1px solid #ccc;
            color: #333;
            display: block;
            background: #efefef;
            background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #efefef), color-stop(1, #fafafa));
            background: -ms-linear-gradient(bottom, #efefef, #fafafa);
            background: -moz-linear-gradient(center bottom, #efefef 0%, #fafafa 100%);
            background: -o-linear-gradient(bottom, #efefef, #fafafa);
            filter: progid:dximagetransform.microsoft.gradient(startColorStr='#e3e3e3', EndColorStr='#ffffff');
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa',EndColorStr='#efefef')";
            box-shadow: inset 0px 1px 1px white;
        }

        .left-menu .menu-body .static-menu a:hover {
            color: #2F72AB;
            border-left: 2px solid #2F72AB;
        }

        .left-menu .menu-body .static-menu a.active {
            color: #2F72AB;
            border-left: 2px solid #2F72AB;
        }
    </style>
{% endblock custom_css %}
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div class="left-menu">
    <div class="menu-body">
        <div class="static-menu">
            {% for k,v in menu_order_dict.items %}
                <div class="item">
                    <div class="title"><i class="fa {{ v.icon }}"></i>{{ v.name }}</div>
                    <div class="body {{ v.class }}">
                        {% for child in v.children %}
                            <a href="{{ child.url }}" class="{{ child.class }}">{{ child.title }}</a>
                        {% endfor %}
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
</div>
<script src="{% static 'js/jquery-3.3.1.min.js' %} "></script>
<script src="{% static 'plugins/bootstrap/js/bootstrap.js' %} "></script>
{% block js %}
    <script>
        $('.title').click(function () {
            $(this).next().toggleClass('hidden');
        })
    </script>
{% endblock js %}

</body>
</html>